<template>
    <div class="seat_content">
        <div class="seat_header">
            <div class="seat_header_title">座位视图</div>
            <div class="seat_header_but">
                <button @click="TZ_Dingdan()" class="QueDing">确定</button>
                <button @click="TZ_1()" class="seat_header_but_1">一层大厅</button>
                <button @click="TZ_2()" class="seat_header_but_2">二层包间</button>
            </div> 
        </div>       
    </div>
    <div class="box">     
       <div class="first">
            <div class="first_div1">
                <div class="room_2">
                    <div class="room_2_div1"  @click="D1('地利')" :style="buttonStyle_D1">地利</div>
                </div>
            </div>
            <div class="first_div1">
                <div class="room_2">
                    <div class="room_2_div1"  @click="D2('人和')" :style="buttonStyle_D2">人和</div>
                </div>
            </div>
            <div class="first_div3">
                <div class="room_1">
                    <div class="room_1_div1" @click="E1('天时')" :style="buttonStyle_E1">天时</div>
                </div>
            </div>
            <div class="first_div2">
                <div class="first_div4">
                    <div class="first_div5">
                        <div class="room_4">
                            <div class="room_4_div1" @click="C1('墨梅阁')" :style="buttonStyle_C1">墨梅阁</div>
                        </div>
                    </div>
                    <div class="first_div5">
                        <div class="room_4">
                            <div class="room_4_div1" @click="C2('玉兰苑')" :style="buttonStyle_C2">玉兰苑</div>
                        </div>
                    </div>
                </div>
                <div class="first_div4" style="margin-top: 28px;">
                    <div class="first_div5" >
                        <div class="room_4">
                            <div class="room_4_div1" @click="C3('翠竹居')" :style="buttonStyle_C3">翠竹居</div>
                        </div>
                    </div>
                    <div class="first_div5" >
                        <div class="room_4">
                            <div class="room_4_div1" @click="C4('金蕊亭')" :style="buttonStyle_C4">金蕊亭</div>
                        </div>
                    </div>
                </div>
                
            </div>
           

       </div>

       <div class="second">
            <div class="second_div">
                
                <div class="room_3">
                    <div class="room_3_div1" @click="B1('福顺府')" :style="buttonStyle_B1">福顺府</div>               
                </div>
            </div>
            <div class="second_div">
               
                <div class="room_3">
                    <div class="room_3_div1" @click="B2('三禄堂')" :style="buttonStyle_B2">三禄堂</div>
                </div>
            </div>
            <div class="second_div">
                
                <div class="room_3">
                    <div class="room_3_div1" @click="B3('康宁园')" :style="buttonStyle_B3">康宁园</div>         
                </div>
            </div>
            <div class="second_div">
                
                <div class="room_3"> 
                    <div class="room_3_div1" @click="B4('双喜门')" :style="buttonStyle_B4">双喜门</div>       
                </div>
            </div>
            <div class="second_div">
                
                <div class="room_3">  
                    <div class="room_3_div1" @click="B5('聚宝斋')" :style="buttonStyle_B5">聚宝斋</div>              
                </div>
            </div>
            <div class="second_div">
                
                <div class="room_3">   
                    <div class="room_3_div1" @click="B6('鸿运居')" :style="buttonStyle_B6">鸿运居</div>            
                </div>
            </div>          
       </div>
    </div>
    <div class="choose">
        <div class="choose_1">
            <div class="choose_1_div1">可选：</div>
            <div class="choose_1_div2"></div>
        </div>
        <div class="choose_2">
            <div  class="choose_2_div1">就餐：</div>
            <div  class="choose_2_div2"></div>
        </div>
        <div class="choose_3">
            <div  class="choose_3_div1">预定：</div>
            <div  class="choose_3_div2"></div>
        </div>
    </div>
   
</template>
<script setup lang="ts">
import { ref,onMounted,watchEffect } from 'vue';
import {useRouter} from 'vue-router'
const router=useRouter()
let num1=ref(0)
let num2=ref(0)
let num3=ref(0)
let num4=ref(0)
let num5=ref(0)
let num6=ref(0)
// ---------------------
let num7=ref(0)
let num8=ref(0)
let num9=ref(0)
let num10=ref(0)
// ------------------------
let num11=ref(0)
let num12=ref(0)
let num13=ref(0)



const buttonStyle_B1 = ref([]);
const buttonStyle_B2 = ref([]);
const buttonStyle_B3 = ref([]);
const buttonStyle_B4 = ref([]);
const buttonStyle_B5 = ref([]);
const buttonStyle_B6 = ref([]);
// -----------------------------------
const buttonStyle_C1 = ref([]);
const buttonStyle_C2 = ref([]);
const buttonStyle_C3 = ref([]);
const buttonStyle_C4 = ref([]);
// ------------------------------------
const buttonStyle_D1 = ref([]);
const buttonStyle_D2 = ref([]);
// ------------------------------------
const buttonStyle_E1 = ref([]);

onMounted(()=>{
    const B1=sessionStorage.getItem('B1') 
    if(B1){
        buttonStyle_B1.value=JSON.parse(B1)
    }
    const B2=sessionStorage.getItem('B2') 
    if(B2){
        buttonStyle_B2.value=JSON.parse(B2)
    }
    const B3=sessionStorage.getItem('B3') 
    if(B3){
        buttonStyle_B3.value=JSON.parse(B3)
    }
    const B4=sessionStorage.getItem('B4') 
    if(B4){
        buttonStyle_B4.value=JSON.parse(B4)
    }
    const B5=sessionStorage.getItem('B5') 
    if(B5){
        buttonStyle_B5.value=JSON.parse(B5)
    }
    const B6=sessionStorage.getItem('B6') 
    if(B6){
        buttonStyle_B6.value=JSON.parse(B6)
    }
// -----------------------------------------------
    const C1=sessionStorage.getItem('C1') 
    if(C1){
        buttonStyle_C1.value=JSON.parse(C1)
    }
    const C2=sessionStorage.getItem('C2') 
    if(C2){
        buttonStyle_C2.value=JSON.parse(C2)
    }
    const C3=sessionStorage.getItem('C3') 
    if(C3){
        buttonStyle_C3.value=JSON.parse(C3)
    }
    const C4=sessionStorage.getItem('C4') 
    if(C4){
        buttonStyle_C4.value=JSON.parse(C4)
    }
// -----------------------------------------------
    const D1=sessionStorage.getItem('D1') 
    if(D1){
        buttonStyle_D1.value=JSON.parse(D1)
    }
    const D2=sessionStorage.getItem('D2') 
    if(D2){
        buttonStyle_D2.value=JSON.parse(D2)
    }
// -----------------------------------------------
    const E1=sessionStorage.getItem('E1') 
    if(E1){
        buttonStyle_E1.value=JSON.parse(E1)
    }
})
const Num=ref(0)
//跳转餐厅区域
function TZ_1(){
  router.push('/seat/content1')
  Num.value=0
}
function TZ_2(){
  router.push('/seat/content2')
  Num.value=1
}
//跳回订单页面
function TZ_Dingdan(){
    router.push({
        path:'/createOrder',
       
    })

    localStorage.setItem('baoname',JSON.stringify(baoname.value))
    localStorage.setItem('index',JSON.stringify(0))
  
}

function B1(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num1.value+=1
    console.log(num1.value,name);
    baoname.value=name
    if(num1.value==0){
        sessionStorage.setItem('B1',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num1.value==1){
        sessionStorage.setItem('B1',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num1.value==2){
        sessionStorage.setItem('B1',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num1.value=-1
    }
    watchEffect(()=>{
        const B1=sessionStorage.getItem('B1') 
        if(B1){
            buttonStyle_B1.value=JSON.parse(sessionStorage.getItem('B1') as string)
        }
        
    })
}

function B2(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num2.value+=1
    if(num2.value==0){
        sessionStorage.setItem('B2',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num2.value==1){
        sessionStorage.setItem('B2',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num2.value==2){
        sessionStorage.setItem('B2',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num2.value=-1
    }
    watchEffect(()=>{
        const B2=sessionStorage.getItem('B2') 
        if(B2){
            buttonStyle_B2.value=JSON.parse(sessionStorage.getItem('B2') as string)
        }
        
    })
}

function B3(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num3.value+=1
    if(num3.value==0){
        sessionStorage.setItem('B3',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num3.value==1){
        sessionStorage.setItem('B3',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num3.value==2){
        sessionStorage.setItem('B3',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num3.value=-1
    }
    watchEffect(()=>{
        const B3=sessionStorage.getItem('B3') 
        if(B3){
            buttonStyle_B3.value=JSON.parse(sessionStorage.getItem('B3') as string)
        }
        
    })
}

function B4(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num4.value+=1
    if(num4.value==0){
        sessionStorage.setItem('B4',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num4.value==1){
        sessionStorage.setItem('B4',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num4.value==2){
        sessionStorage.setItem('B4',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num4.value=-1
    }
    watchEffect(()=>{
        const B4=sessionStorage.getItem('B4') 
        if(B4){
            buttonStyle_B4.value=JSON.parse(sessionStorage.getItem('B4') as string)
        }
        
    })
}

function B5(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num5.value+=1
    if(num5.value==0){
        sessionStorage.setItem('B5',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num5.value==1){
        sessionStorage.setItem('B5',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num5.value==2){
        sessionStorage.setItem('B5',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num5.value=-1
    }
    watchEffect(()=>{
        const B5=sessionStorage.getItem('B5') 
        if(B5){
            buttonStyle_B5.value=JSON.parse(sessionStorage.getItem('B5') as string)
        }
        
    })
}

function B6(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num6.value+=1
    if(num6.value==0){
        sessionStorage.setItem('B6',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num6.value==1){
        sessionStorage.setItem('B6',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num6.value==2){
        sessionStorage.setItem('B6',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num6.value=-1
    }
    watchEffect(()=>{
        const B6=sessionStorage.getItem('B6') 
        if(B6){
            buttonStyle_B6.value=JSON.parse(sessionStorage.getItem('B6') as string)
        }
        
    })
}
// -----------------------------------------------------------------------------------------------------------
function C1(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num7.value+=1
    if(num7.value==0){
        sessionStorage.setItem('C1',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num7.value==1){
        sessionStorage.setItem('C1',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num7.value==2){
        sessionStorage.setItem('C1',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num7.value=-1
    }
    watchEffect(()=>{
        const C1=sessionStorage.getItem('C1') 
        if(C1){
            buttonStyle_C1.value=JSON.parse(sessionStorage.getItem('C1') as string)
        }
        
    })
}

function C2(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num8.value+=1
    
    if(num8.value==0){
        sessionStorage.setItem('C2',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num8.value==1){
        sessionStorage.setItem('C2',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num8.value==2){
        sessionStorage.setItem('C2',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num8.value=-1
    }
    watchEffect(()=>{
        const C2=sessionStorage.getItem('C2') 
        if(C2){
            buttonStyle_C2.value=JSON.parse(sessionStorage.getItem('C2') as string)
        }
        
    })
}

function C3(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num9.value+=1
    if(num9.value==0){
        sessionStorage.setItem('C3',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num9.value==1){
        sessionStorage.setItem('C3',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num9.value==2){
        sessionStorage.setItem('C3',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num9.value=-1
    }
    watchEffect(()=>{
        const C3=sessionStorage.getItem('C3') 
        if(C3){
            buttonStyle_C3.value=JSON.parse(sessionStorage.getItem('C3') as string)
        }
        
    })
}

function C4(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num10.value+=1
    if(num10.value==0){
        sessionStorage.setItem('C4',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(0,0,0,0.3)'}))
    }
    if(num10.value==1){
        sessionStorage.setItem('C4',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num10.value==2){
        sessionStorage.setItem('C4',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num10.value=-1
    }
    watchEffect(()=>{
        const C4=sessionStorage.getItem('C4') 
        if(C4){
            buttonStyle_C4.value=JSON.parse(sessionStorage.getItem('C4') as string)
        }
        
    })
}
// -----------------------------------------------------------------------------------------------------------
function D1(name:string){

    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num11.value+=1
    if(num11.value==0){
        sessionStorage.setItem('D1',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(255,215,0,0.7)'}))
    }
    if(num11.value==1){
        sessionStorage.setItem('D1',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num11.value==2){
        sessionStorage.setItem('D1',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num11.value=-1
    }
    watchEffect(()=>{
        const D1=sessionStorage.getItem('D1') 
        if(D1){
            buttonStyle_D1.value=JSON.parse(sessionStorage.getItem('D1') as string)
        }
        
    })
}

const baoname=ref('')

function D2(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    num12.value+=1
    console.log(name)
    baoname.value=name
    
    if(num12.value==0){
        sessionStorage.setItem('D2',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(255,215,0,0.7)'}))
    }
    if(num12.value==1){
        sessionStorage.setItem('D2',JSON.stringify({backgroundColor: 'red', color: '#aaa'}))
    }
    if(num12.value==2){
        sessionStorage.setItem('D2',JSON.stringify({backgroundColor: '#8beaf8', color: '#aaa'}))
        num12.value=-1
    }
    watchEffect(()=>{
        const D2=sessionStorage.getItem('D2') 
        if(D2){
            buttonStyle_D2.value=JSON.parse(sessionStorage.getItem('D2') as string)
        }
        
    })
}
// -----------------------------------------------------------------------------------------------------------
function E1(name:string){
    localStorage.setItem('baoname',JSON.stringify(name))
    baoname.value=name
    num13.value+=1
    if(num13.value==0){
        sessionStorage.setItem('E1',JSON.stringify({backgroundColor: '#ccc', color: 'rgba(255,215,0)'}))
    }
    if(num13.value==1){
        sessionStorage.setItem('E1',JSON.stringify({backgroundColor: 'red', color: 'rgba(255,215,0)'}))
    }
    if(num13.value==2){
        sessionStorage.setItem('E1',JSON.stringify({backgroundColor: '#8beaf8', color: 'rgba(255,215,0)'}))
        num13.value=-1
    }
    watchEffect(()=>{
        const E1=sessionStorage.getItem('E1') 
        if(E1){
            buttonStyle_E1.value=JSON.parse(sessionStorage.getItem('E1') as string)
        }
        
    })
}
</script>

<style scoped lang="less">
.seat_content{
    width: 100%;
    background-color: #F5F5F5;
    .seat_header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border: 1px solid red;
        .seat_header_title{
            font-size: 30px;
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .seat_header_but{
            display: flex;
            justify-content: space-between;
            width: 320px;
            // border: 1px solid #000;
            margin-right: 40px;
            .QueDing{
                width: 100px;
                height: 50px;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;  
            }
            .seat_header_but_1{
                width: 100px;
                height: 50px;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;           
            }
            .seat_header_but_2{
                width: 100px;
                height: 50px;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;
            }
        }
    }
            
}
.active{
    width: 100px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;  
    background-color: #DCEEFE;
    color:#2A77D3;
}
.box{
    border-top: solid #000;
    border-left: solid #000;
    border-bottom: solid #000;
    border-radius: 10px;
    background-color: #fff;
    width: 100%;
    // height: 100%;
   
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 660px;
}
.first{
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: space-between;
    // border: 1px solid #000;
    .first_div1{
        width: 250px;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .first_div2{
        width: 350px;
        // border: 1px solid #000;
        border-right:1px solid #000;
     
        .first_div4{
            width: 100%;
            height: 166px;
            // border: 1px solid red;
            display: flex;
            .first_div5{
                width: 50%;
                height: 100%;
                // border: 1px solid red;
                border-top: 1px solid #000;
                border-left: 1px solid #000;
                border-bottom: 1px solid #000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .first_div3{
        width: 350px;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.second{
    width: 100%;
    display: flex;
    justify-content: space-around;
    // border: 1px solid #000;
    height: 250px;
    margin-top: 60px;
    .second_div{
        width: 17%;
        // border: 1px solid red;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
      
    } 
}

//包间号
.room_1{
    width: 120px;
    height: 300px;
    writing-mode: vertical-rl;
    border: 2px solid rgba(255,215,1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 700;
    color: #aaa;
    border-radius: 15px;
}
.room_1::before{
        content: '';
        position: absolute;
        width: 120px;
        height: 300px;
        background: repeating-conic-gradient(from var(--a),rgba(255,215,0,0.5) 0%,rgba(255,215,0,0.5) 10%,transparent 10%,transparent 80%,rgba(255,215,0,0.5) 100%);
        border-radius: 20px;
        animation: room 2.5s linear infinite;
        // border: 1px solid red;
       
}
.room_1_div1{
    width: 100px;
    height: 280px;
    writing-mode: vertical-rl;
    border: 2px solid rgba(255,215,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 700;
    color: rgba(255,215,0,0.7);
    border-radius: 15px;
    background-color: #ccc;
    box-shadow: 0 5px 100px rgba(225,215,0,0.5);
    z-index: 1000;
}
.room_2{
    width: 100px;
    height: 300px;
    writing-mode: vertical-rl;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 700;
    color: #aaa;
    border-radius: 15px;

}
.room_2::before{
    content: '';
    position: absolute;
    width: 100px;
    height: 300px;
    background: repeating-conic-gradient(from var(--a),rgba(255,0,0,0.5) 0%,rgba(255,0,0,0.5) 10%,transparent 10%,transparent 80%,rgba(255,0,0,0.5) 100%);
    border-radius: 15px;
    animation: room 2.5s linear infinite;
    // border: 1px solid red;
       
}

.room_2_div1{
    width: 80px;
    height: 280px;
    writing-mode: vertical-rl;
    border: 2px solid rgba(255,215,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 700;
    color: rgba(255,215,0,0.7);
    border-radius: 15px;
    background-color: #ccc;
    box-shadow: 0 5px 100px rgba(255,0,0,0.7);
    z-index: 1000;

}
.room_3{
    width: 100px;
    height: 200px;
    writing-mode: vertical-rl;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: 700;
    // color: #aaa;
    border-radius: 15px;
	box-shadow: 0 5px 25px rgba(0,0,0,0.25);
    z-index: 1000;
    transition: 0.5s;
    overflow: hidden;
}
.room_3::before{
        content: '';
        position: absolute;
        width: 100px;
        height: 200px;
        background: repeating-conic-gradient(from var(--a),#45f3ff 0%,#45f3ff 10%,transparent 10%,transparent 80%,#45f3ff 100%);
        border-radius: 15px;
        animation: room 2.5s linear infinite;
        // border: 1px solid red;
       
}
@property --a
    {
        syntax: '<angle>';
        inherits: false;
        initial-value: 0deg;
    }
@keyframes room 
{
	0% 
	{
		--a: 0deg
	}
	100% 
	{
		--a: 360deg
	}
}
.room_3_div1{
    width: 80px;
    height: 180px;
    writing-mode: vertical-rl;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: 700;
    color: rgba(0,0,0,0.3);
    // color:#aaa;
    border-radius: 15px;
	box-shadow: 0 5px 25px rgba(225,0,215,0.5);
    z-index: 1000;
    // background-color: red;
    background-color: #ccc;
   
}
.room_4{
    width: 80px;
    height: 140px;
    writing-mode: vertical-rl;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 700;
    border-radius: 15px;
    color: #aaa;
}
.room_4::before{
        content: '';
        position: absolute;
        width: 80px;
        height: 140px;
        background: repeating-conic-gradient(from var(--a),#7FFF00 0%,#7FFF00 10%,transparent 10%,transparent 80%,#7FFF00 100%);
        // border-radius: 20px;
        animation: room 2.5s linear infinite;
        // border: 1px solid red;  
        border-radius: 15px;
}

.room_4_div1{
    width: 60px;
    height: 120px;
    writing-mode: vertical-rl;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 700;
    color: rgba(0,0,0,0.3);
    // color:#aaa;
    border-radius: 10px;
	box-shadow: 0 5px 25px rgba(255,0,0,0.3);
    z-index: 1000;
    // background-color: red;
    background-color: #ccc;
}
//可选
.choose{
    width: 400px;
    height: 50px;
    // border: 1px solid #000;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius:10px;
    margin-left: 20px;
    .choose_1{
        width: 100px;
        // border: 1px solid #000;
        display: flex;
        .choose_1_div1{
            width: 60px;
            height: 24px;
            // border: 1px solid #342e2e;
            text-align: right;
        }
        .choose_1_div2{
            width: 24px;
            height: 24px;
            // border: 1px solid #000;
            background-color: #ccc;
        }
       
    }
    .choose_2{
        width: 100px;
        // border: 1px solid #000;
        display: flex;
        .choose_2_div1{
            width: 60px;
            height: 24px;
            // border: 1px solid #342e2e;
            text-align: right;
        }
        .choose_2_div2{
            width: 24px;
            height: 24px;
            // border: 1px solid #000;
            background-color: #8beaf8;
        }
    }
    .choose_3{
        width: 100px;
        // border: 1px solid #000;
        display: flex;
        .choose_3_div1{
            width: 60px;
            height: 24px;
            // border: 1px solid #342e2e;
            text-align: right;
        }
        .choose_3_div2{
            width: 24px;
            height: 24px;
            // border: 1px solid #000;
            background-color: red;
        }
    }

}



</style>